<template>
  <div>
    <span>配置系统</span>
    <div @click="dialogVisible = true">
      <el-avatar style="position: fixed;right: 20px;top: 15px;"
                 src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="50%">
      <el-form :inline="true" :model="settingForm" ref="settingForm" class="setting-form" :rules="settingRules">
        <el-form-item label="每页显示数量：" prop="pageSize">
          <el-input-number size="medium" v-model="settingForm.pageSize" :min="1" :max="100"
                           class="vertical-page-size"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmClickHandler">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import $setting from "@/store/storage/storage-setting";
import store from "@/store"

export default {
  name: "HomeHeader",
  data() {
    return {
      dialogVisible: false,
      settingForm: {
        pageSize: this.$store.state.pageSize
      },
      settingRules: {}
    };
  },
  created() {

  },
  methods: {
    confirmClickHandler() {
      // 设置全局缓存参数
      $setting.setGlobalStorageSetting(store, this.settingForm);
      this.dialogVisible = false;
    }
  }
}
</script>

<style scoped>
.setting-form .vertical-page-size {
  margin-top: 10px;
}
</style>
